<template>
  <div id="datetime">
    <div id="time">{{ datetime.time }}</div>
    <div id="date">{{ datetime.date }}</div>
    <div id="week">{{ datetime.week }}</div>
  </div>
</template>

<script>
export default {
  name: 'TopRight',
  components: {
  },
  data () {
    return {
      datetime: {
        time: '0',
        date: '1',
        week: '2'
      }
    }
  },
  methods: {
    createData () {
      this.datetime.time = this.getTime()
      this.datetime.date = this.getDate()
      this.datetime.week = this.getWeek()
    },
    getTime () {
      let date = new Date()
      return date.getHours() + ':' + (date.getMinutes() >= 10 ? date.getMinutes() : '0' + date.getMinutes()) + ':' + (date.getSeconds() >= 10 ? date.getSeconds() : '0' + date.getSeconds())
    },
    getDate () {
      let date = new Date()
      return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
    },
    getWeek () {
      let date = new Date()
      var weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      return weekday[date.getDay()]
    }
  },
  mounted () {
    const { createData } = this
    createData()
  }
}
</script>

<style lang='less'>
#datetime {
  height: 70px;
  font: 28px sans-serif ;
  margin-top: 10px;

  #date,
  #time {
    display: inline-block;
    width: 180px;
    margin-left: -20px;
  }

  #time {
    font-size: 32px;
  }

  #date {
    font-family: 'Courier New', Courier, monospace;
  }

  #week {
    display: inline-block;
    font-family: 'Courier New', Courier, monospace;

  }
}
</style>
